import React from 'react';
import { connect } from 'umi';
import { Tabs, Button } from 'antd';
const { TabPane } = Tabs;

import styles from './index.less';

const leftArr = [
  {
    id: '1',
    title: '大标题+单图',
    src: './textsimg1.png',
  },
  {
    id: '2',
    title: '左图+右标题内容',
    src: './textsimg4.png',
  },
  {
    id: '3',
    title: '左两列+图',
    src: './textsimg5.png',
  },
  {
    id: '4',
    title: '左两列+图',
    src: './textsimg6.png',
  },

  {
    id: '5',
    title: '左三图+右内容',
    src: './textsimg7.png',
  },

  {
    id: '6',
    title: '大标题+单图',
    src: './textsimg1.png',
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      htmlText: '',
    };
  }

  componentDidMount() {}

  callback = (key) => {
    console.log(key);
  };

  onDragStart = (event: any) => {
    // event.preventDefault();
    console.log('===onDragStart===');
  };

  onDragEnter = (event: any) => {
    // event.preventDefault();
    console.log('===onDragEnter===');
  };

  onDrag = (event: any) => {
    event.preventDefault();
    // console.log('==>',e);
    let className = event.dataTransfer.getData('className');
    let newBox = document.createElement('div');
    newBox.className = className;
    console.log('===onDrag===');
    // box1Dom.appendChild(newBox);
    // box1Dom.className = 'box1';
  };

  render() {
    return (
      <div className={styles.designContent}>
        <div className={styles.designLeft}>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="模板" key="1">
              {leftArr &&
                leftArr.map((item) => {
                  return (
                    <div
                      title={item.title}
                      draggable="true"
                      key={item.id}
                      className={styles.abbreviateContent}
                    >
                      <img
                        className={styles.abbreviateImg}
                        src={item.src}
                        alt=""
                      />
                      <div className={styles.abbreviateTitle}>{item.title}</div>
                    </div>
                  );
                })}
            </TabPane>

            <TabPane tab="组件" key="2">
              <div draggable="true" onDragStart={this.onDragStart}>
                <Button type="dashed" block>
                  Dashed
                </Button>
              </div>
            </TabPane>
          </Tabs>
        </div>

        <div
          className={styles.designCenter}
          onDragEnter={this.onDragEnter}
          onDrag={this.onDrag}
        >
          {/*<h1*/}
          {/*  data-highlightable="1"*/}
          {/*  className={styles.qhTextSelected}*/}
          {/*  contentEditable="true"*/}
          {/*>*/}
          {/*  稳定高复用的企业级产品*/}
          {/*</h1>*/}
          {/*<h1*/}
          {/*  data-highlightable="1"*/}
          {/*  className={styles.qhTextSelected}*/}
          {/*  contentEditable="true"*/}
          {/*>*/}
          {/*  稳定高复用的企业级产品*/}
          {/*</h1>*/}
          {/*<h1*/}
          {/*  data-highlightable="1"*/}
          {/*  className={styles.qhTextSelected}*/}
          {/*  contentEditable="true"*/}
          {/*>*/}
          {/*  稳定高复用的企业级产品*/}
          {/*</h1>*/}
          {/*<h1*/}
          {/*  data-highlightable="1"*/}
          {/*  className={styles.qhTextSelected}*/}
          {/*  contentEditable="true"*/}
          {/*>*/}
          {/*  稳定高复用的企业级产品*/}
          {/*</h1>*/}
        </div>

        <div className={styles.designRight}></div>
      </div>
    );
  }
}

export default connect(({ editorModel }) => ({
  editorModel,
}))(App);
